<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            width: 100vw;
            position: relative;
        }
        .window {
            height: 80vh;
            width: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            outline: 1px solid red;
        }
        .header,
        .footer {
            width: 100%;
            height: 50px;
            position: absolute;
            display: grid;
        }
        .header {
            top: 0;
            border-bottom: 1px solid red;
            grid-template-columns: 1fr 50px;
        }
        .footer {
            bottom: 0;
            border-top: 1px solid red;
            grid-template-columns: 50px 1fr 50px;
        }
        .footer>div {
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box
        }
        .inp-wrapper {
            padding: 8px 16px;
        }
        .inp-wrapper input {
            width: 100%;
            height: 100%;
        }
        .content-wrapper {
            width: 100%;
            position: absolute;
            top: 51px;
            bottom: 51px;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        .content {
            height: auto;
            width: 100%;
        }
        .sentence-container {
            height: auto;
            width: 100%;
            display: grid;
            margin: 8px 0;
        }
        .sentence-container .avatar-wrapper {
            text-align: center;
            line-height: 2;
        }
        .sentence-container.left {
            /* background-color: #ccc; */
            grid-template-columns: 50px 1fr;
        }
        .sentence-container.right {
            /* background-color: #e8e8e8; */
            grid-template-columns: 1fr 50px;
        }
        .sentence-wrapper {
            /* BFC ( block formatting context ) */
            overflow: hidden;
        }
        .sentence {
            /* line-height: 2; */
            max-width: calc(100% - 50px);
            border-radius: 8px;
            padding: 8px;
            box-sizing: border-box;
            word-break: break-all;
        }
        .sentence-container.left .sentence {
            background-color: #ccc;
        }
        .sentence-container.right .sentence {
            background-color: green;
        }

        .sentence-container.left .sentence {
            float: left;
        }
        .sentence-container.right .sentence {
            float: right;
        }
    </style>
</head>
<body>
    <div class="window">
        <div class="header">
            <div class="name-wrapper">xx同学</div>
            <div class="avatar-wrapper">头像</div>
        </div>
        <div class="content-wrapper">
            <div class="content">
                <div class="sentence-container left">
                    <div class="avatar-wrapper">头像</div>
                    <div class="sentence-wrapper">
                        <div class="sentence">嗨嗨嗨嗨1111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
                    </div>
                </div>
                <div class="sentence-container right">
                    <div class="sentence-wrapper">
                        <div class="sentence">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
                    </div>
                    <div class="avatar-wrapper">头像</div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="avatar-wrapper">头像</div>
            <div class="inp-wrapper">
                <input id="send-inp" type="text" placeholder="说点什么吧...">
            </div>
            <div class="btn-wrapper">
                <button id="send-btn">发送</button>
            </div>
        </div>
    </div>

    <audio id="audio" src="" autoplay></audio>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./jq/jq.js"></script>
    <script>

        async function send () {
            // 函数式编程
            const msg = $('#send-inp').val();
            createMsg('right', msg);
            const resMsg = await receiveMsg(msg);
            createMsg('left', resMsg);
            receiveAudio(resMsg);
        }

        /**
         * @param { string } msg
         * @return { Promise<string> }
        */
        async function receiveMsg (msg) {
            const res = await axios({
                method: 'GET',
                url: 'http://www.liulongbin.top:3006/api/robot',
                // parameters
                params: {
                    spoken: msg,
                },
            });
            return res.data.data.info.text;
        }

        /**
         * @param { string } msg
        */
        async function receiveAudio (msg) {
            const res = await axios({
                method: 'GET',
                url: 'http://www.liulongbin.top:3006/api/synthesize',
                params: {
                    text: msg,
                },
            });
            $('#audio').attr('src', res.data.voiceUrl);
        }

        /**
         * @param { 'left' | 'right' } position
         * @param { string } msg
        */
        function createMsg (position, msg) {
            const avatarHTML = '<div class="avatar-wrapper">头像</div>';
            const sentenceHTML = `
                <div class="sentence-wrapper">
                    <div class="sentence">${ msg }</div>
                </div>
            `;
            const el = $(`
                <div class="sentence-container ${ position }">
                    ${ 
                        position === 'left'
                        ? avatarHTML + sentenceHTML
                        : sentenceHTML + avatarHTML
                    }
                </div>
            `);
            $('.content').append(el);
            const dist = $('.content').height() - $('.content-wrapper').height() + 16;
            dist > 0 && $('.content-wrapper').scrollTop(dist);
        }

        $('#send-btn').on('click', send);
        $('#send-inp').on('keyup', (e) => e.key === 'Enter' && send());
        // $('#send-inp').on('keyup', (e) => {
        //     if (e.key === 'Enter') {
        //         sendMsg();
        //     }
        // });

    </script>
</body>
</html>